<template>
    <div>
        <el-dialog :visible.sync="visible" title="巡检计划详情" center width="64%" @open="opens()">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card class="box-card">
                        <el-form ref="form" label-width="200px" :label-position="labelPosition">
                            <el-form-item label="任务编号：" prop="serial">
                                <span>{{info.serial}}</span>
                                <div class="text-status inactive" v-if="info.routeInfo.status === 0">未生效</div>
                                <div class="text-status active" v-if="info.routeInfo.status === 1">已生效</div>
                            </el-form-item>
                            <el-form-item label="任务名称：" prop="name">
                                <span>{{info.routeInfo.name}}</span>
                            </el-form-item>
                            <el-form-item label="每隔：" prop="formSpan">
                                <span><b>{{info.routeInfo.formSpan}}</b> 生成巡检单</span>
                            </el-form-item>
                            <el-form-item label="计划下次执行巡检时间为：" prop="nextBeginTime">
                                <span>{{info.routeInfo.nextBeginTime}}</span>
                            </el-form-item>
                            <el-form-item label="生效时间范围：" prop="validTimeRange">
                                <span>{{info.routeInfo.validTimeRange[0]}} 至 {{info.routeInfo.validTimeRange[1]}}</span>
                            </el-form-item>
                            <el-form-item label="巡检执行人：" prop="executorName">
                                <span>{{info.routeInfo.executorName}}</span>
                            </el-form-item>
                            <el-form-item label="是否需要复核人：" prop="reviewerName">
                                <span v-if="info.routeInfo.needReviewed">{{info.routeInfo.reviewerName}}</span>
                                <span v-else>无复核人</span>
                            </el-form-item>
                            <el-form-item label="巡检单未执行是否提醒：" prop="isReminder">
                                <span v-if="info.routeInfo.isReminder">需要提醒</span>
                                <span v-else>不需要提醒</span>
                            </el-form-item>
                            <el-form-item label="是否允许取消：" prop="noCancel">
                                <span v-if="info.routeInfo.noCancel">不允许取消</span>
                                <span v-else>允许取消</span>
                            </el-form-item>
                            <el-form-item label="是否延误提醒：" prop="isDelayAlert">
                                <span v-if="info.routeInfo.isDelayAlert">巡检需要在 <b>{{info.routeInfo.delayAlertTime}}</b>分钟内完成,延误提醒</span>
                                <span v-else>不需要延误提醒</span>
                            </el-form-item>
                            <el-form-item label="是否需要按照巡检点次序：" prop="isOrder">
                                <span v-if="info.routeInfo.isOrder">需要按照次序</span>
                                <span v-else>不需要按照次序</span>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card>
                        <div id="routeChart" style="width: 400px;height: 420px;margin: 0 auto"></div>
                    </el-card>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios'
    import {nanoid} from 'nanoid'

    export default {
        name: "route-info",
        data() {
            return {
                visible: false,
                info: {},
                labelPosition: 'right',
                options: {},
                routeData: []
            }
        },
        methods: {
            init(id) {
                this.visible = true;
                this.$nextTick(() => {
                    axios.get('http://gulimall.com/api/inspection/route/routeInfo', {
                        params: {routeId: id}
                    }).then(
                        response => {
                            this.info = response.data.data;
                            this.info.serial = nanoid();
                            let success = this.info.success;
                            let timeout = this.info.timeout;
                            let untreated = this.info.untreated;
                            let cancel = this.info.cancel;
                            let all = success + timeout + untreated + cancel;
                            this.routeData = [success, timeout, untreated, cancel, all];
                        },
                        error => {console.log('获取巡检计划信息失败')}
                    );
                });
            },
            initChartBar() {
                let options = {
                    tooltip: {
                        trigger: 'axis',
                        showDelay: 0,
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        show: true
                    },
                    xAxis: {
                        data: ["按时完成","超时完成","未处理","已取消","总单数"]
                    },
                    yAxis: {},
                    series: [{
                        // name: ["按时完成","超时完成","未处理","已取消","总单数"],
                        data: this.routeData,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                    let colorList = ['#29c98b','#7cc8f8','#ff5a5a','#666','#ffa000'];
                                    return colorList[params.dataIndex]
                                },
                                label: {
                                    show: true,
                                    position: 'top'
                                }
                            }
                        }
                    }]
                };

                let chartBar = this.$echarts.init(document.getElementById("routeChart"));
                chartBar.setOption(options);
            },
            opens() {
                this.$nextTick(() => {
                    console.log('opens');
                    this.initChartBar();
                });
            }
        }
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    b {
        color: #FFA000;
        border: 1px
        solid #FFA000;
        padding: 0 3px;
        min-width: 60px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border-radius: 40px;
        margin-right: 8px;
        font-weight: 100;
        display: inline-block;
        box-sizing: border-box;
    }

    .active {
        background: #FFA000;
        color: #fff;
    }

    .inactive {
        background: #F56C6C;
        color: #fff;
    }

    .text-status {
        display: inline-block;
        margin-left: 20px;
        width: 80px;
        height: 26px;
        line-height: 26px;
        border-radius: 40px;
        text-align: center;
    }

    .el-form-item {
         margin-bottom: 2px;
    }
</style>
